<template>
  <div class="guide-container">
    <el-card class="box-card">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <span style="color: #58bc58; font-size: 18px">题目详情：</span>
          </template>
          <div class="guide-title">
            <p>
              可选专业：
              <span v-text="form.professional"></span>
            </p>
            <p>
              题目申报时间：
              <span v-text="form.contactTime"></span>
            </p>
            <p>
              题目类型：
              <span v-text="form.type"></span>
            </p>
            <p>
              题目来源：
              <span v-text="form.resource"></span>
            </p>
            <p>
              选择模式：
              <span v-text="form.model"></span>
            </p>
            <p>
              题目所属专业：
              <span v-text="form.titleProfessional"></span>
            </p>
            <p>
              指导老师：
              <span v-text="form.teacher"></span>
            </p>
            <p>
              教师职称：
              <span v-text="form.teacherTitle"></span>
            </p>
            <p>
              倒是联系邮箱：
              <span v-text="form.email"></span>
            </p>
            <p>
              学生姓名：
              <span v-text="form.studentName"></span>
            </p>
            <p>
              学生院系专业：
              <span v-text="form.departments"></span>
            </p>
          </div>
        </el-collapse-item>
      </el-collapse>
      <h3 style="color: #58bc58; margin-top: 60px">指导记录</h3>
      <el-button type="primary" style="margin-bottom: 20px" @click="addGuideNews">添加写作记录</el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="题目" width="180"></el-table-column>
        <el-table-column prop="time" label="提交时间"></el-table-column>
        <el-table-column prop="sort" label="提交次序"></el-table-column>
        <el-table-column prop="reviewsState" label="审核状态"></el-table-column>
        <el-table-column prop="results" label="平时成绩"></el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="添加指导记录" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="起止日期:" :label-width="formLabelWidth">
            <el-input v-model="form.guideTime" placeholder="实例：2021年11月9日 - 2021年11月9日"></el-input>
          </el-form-item>
          <el-form-item label="计划完成内容:" :label-width="formLabelWidth">
            <el-input v-model="form.fromOf"></el-input>
          </el-form-item>
          <el-form-item label="实际完成内容:" :label-width="formLabelWidth">
            <el-input v-model="form.content" rows="2" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="guideOnSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      form: {
        title: "多福多寿",
        professional: "范德萨发",
        time: "打发范德萨",
        resource: "大幅度安抚",
        model: "打发的发",
        titleProfessional: "打发答案是发送到",
        teacher: " 打发士大夫撒发",
        teacherTitle: "范德萨范德萨",
        contactTime: "发士大夫撒发的",
        studentName: "发大水发生",
        departments: "法大放送",
        email: "发生的发生",
        type: "打算"
      },
      dialogForm: {
        guideTime: "",
        fromOf: "",
        content: ""
      },
      tableData: [
        {
          title: "2016-05-02",
          time: "上海市普陀区金沙江路 1518 弄",
          sort: "11111",
          reviewsState: "1222222",
          results: '60'
        }
      ],
      dialogFormVisible: false,
      formLabelWidth: "120px"
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    addGuideNews() {
      this.dialogFormVisible = true;
    },
    guideOnSubmit() {
      this.dialogFormVisible = false;
      console.log("弹窗内容", this.dialogForm);
    }
  }
};
</script>
<style lang='scss' scoped>
.guide-container {
  padding: 20px;
}

.guide-title {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  align-content: center;
  p {
    width: 200px;
    margin-right: 20px;
    color: black;
    span {
      color: rgb(101, 152, 219);
    }
  }
}
</style>